<script setup lang="ts">
import { cva } from "class-variance-authority";
import { ElTag, ElText } from "element-plus";
import { computed } from "vue";

const { value, options } = defineProps<{
  options?: any[];
  value?: string | number;
  isText?: boolean;
}>();

const render = computed(() => options?.find((e) => e.value === value));

const types = cva("", {
  variants: {
    color: {
      purple: "text-purple bg-#f9f0ff border-#d3adf7",
      cyan: "text-#08979c bg-#e6fffb border-#87e8de",
      lime: "text-#7cb305 bg-#fcffe6 border-#eaff8f",
    },
  },
});
</script>

<template>
  <component
    :is="isText ? ElText : ElTag"
    :type="render?.color"
    :class="[types({ color: render.color })]"
  >
    {{ render?.label }}
  </component>
</template>
